import React from 'react';

import {
  DatePicker, Form, Input, Modal, Select,
} from 'antd';

import UserContext from '../../components/common/UserContext';

class InternalNewUserForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
    this.handleConfirmBlur = this.handleConfirmBlur.bind(this);
    this.compareToFirstPassword = this.compareToFirstPassword.bind(this);
    this.validateToNextPassword = this.validateToNextPassword.bind(this);
  }

  handleConfirmBlur(e) {
    const { value } = e.target;
    this.confirmDirty = this.confirmDirty || !!value;
  }

  compareToFirstPassword(rule, value, callback) {
    const { form } = this.props;
    if (value && value !== form.getFieldValue('password')) {
      callback('两次输入的密码不一致');
    } else {
      callback();
    }
  }

  validateToNextPassword(rule, value, callback) {
    const { form } = this.props;
    if (value && this.confirmDirty) {
      form.validateFields(['confirm'], { force: true });
    }
    callback();
  }

  render() {
    const formItemLayout = {
      labelCol: { span: 7 },
      wrapperCol: { span: 15 },
    };
    const {
      visible,
      onCancel,
      onCreate,
      form,
      confirmLoading,
    } = this.props;
    const { getFieldDecorator } = form;

    return (
      <div>
        <Modal
          visible={visible}
          confirmLoading={confirmLoading}
          title={`添加用户：用户基本信息${form.getFieldValue('role') === 'USER' ? '(Step1)' : ''}`}
          okText={form.getFieldValue('role') === 'ADMIN' ? '创建' : '下一步'}
          onCancel={onCancel}
          onOk={onCreate}
          width={800}
        >
          <UserContext.Consumer>
            {(value) => (
              <Form layout="horizontal">
                <Form.Item {...formItemLayout} label="用户名">
                  {getFieldDecorator('username', {
                    rules: [{ required: true, message: '用户名不能为空.' }],
                  })(<Input autoComplete="username" autoFocus />)}
                </Form.Item>
                <Form.Item {...formItemLayout} label="密码">
                  {getFieldDecorator('password', {
                    rules: [
                      { required: true, message: '密码不能为空.' },
                      { validator: this.validateToNextPassword },
                    ],
                  })(<Input type="password" autoComplete="new-password" />)}
                </Form.Item>
                <Form.Item {...formItemLayout} label="确认密码">
                  {getFieldDecorator('confirm', {
                    rules: [
                      { required: true, message: '请确认密码.' },
                      { validator: this.compareToFirstPassword },
                    ],
                  })(
                    <Input
                      type="password"
                      autoComplete="new-password"
                      onPressEnter={onCreate}
                      onBlur={this.handleConfirmBlur}
                    />,
                  )}
                </Form.Item>

                <Form.Item {...formItemLayout} label="责任人">
                  {getFieldDecorator('owner', {
                    rules: [{ required: true, message: '责任人不能为空' }],
                  })(
                    <Input />,
                  )}
                </Form.Item>
                <Form.Item {...formItemLayout} label="过期时间">
                  {getFieldDecorator('dtExpiry', {
                    rules: [{ required: true, message: '过期时间不能为空' }],
                  })(
                    <DatePicker />,
                  )}
                </Form.Item>
                <Form.Item {...formItemLayout} label="角色">
                  {getFieldDecorator('role', { initialValue: 'USER' })(
                    <Select>
                      <Select.Option
                        disabled={value.authorities[0].authority === 'ROLE_ADMIN'}
                        value="ADMIN"
                        label="管理员"
                      >
                        管理员
                      </Select.Option>
                      <Select.Option value="USER" label="普通用户">普通用户</Select.Option>
                    </Select>,
                  )}
                </Form.Item>
              </Form>
            )}
          </UserContext.Consumer>
        </Modal>
      </div>
    );
  }
}

const NewUserForm = Form.create()(InternalNewUserForm);
export default NewUserForm;
